<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>新生报名</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name=”apple-mobile-web-app-status-bar-style” content=”default”/>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”/>
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no"/>
    <script type="text/javascript" src="${s.base}/mobile/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="${s.base}/mobile/js/fontSize.js"></script>
    <script type="text/javascript" src="${s.base}/mobile/js/window_port.js"></script>
    <link href="${s.base}/mobile/css/weui.min.css" rel="stylesheet"/>
    <link href="${s.base}/mobile/css/jquery-weui.css" rel="stylesheet"/>
    <link href="${s.base}/mobile/css/weChat.css" rel="stylesheet"/>
</head>
<style type="text/css">
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;
    }
</style>
<body>
<!-- 弹窗区域 -->
<!-- 弹窗提示 -->
<div class="tc" style="display: none;">
    <div class="tc-out">
        <div class="tc-ctn">
            <div class="tc-top-pic"><img src="${s.base}/mobile/images/successtip.png"></div>
            <div class="tc-middle-txt">提交成功！</div>
            <div class="tc-bot-btn clearfix">
                <div class="tc-button only-btn-blue">确定</div>
            </div>
        </div>
    </div>
</div>
<!-- 弹窗提示失败 -->
<div class="tc" style="display: none;">
    <div class="tc-out">
        <div class="tc-ctn">
            <div class="tc-top-pic"><img src="${s.base}/mobile/images/failure.png"></div>
            <div class="tc-middle-txt">提交失败！</div>
            <div class="tc-bot-btn clearfix">
                <div class="tc-button only-btn-orange">确定</div>
            </div>
        </div>
    </div>
</div>
<!-- 弹窗确认取消 -->
<div class="tc" style="display: none;">
    <div class="tc-out">
        <div class="tc-ctn">
            <div class="tc-top-pic"><img src="${s.base}/mobile/images/whethertip.png"></div>
            <div class="tc-middle-txt">是否确定提交？</div>
            <div class="tc-bot-btn clearfix">
                <div class="tc-button submit">确定</div>
                <div class="tc-button cancel">取消</div>
            </div>
        </div>
    </div>
</div>
<!-- 弹窗区域结束 -->
<div class="onlineSignUp-ctn">
    <div class="signUp-top">
        <img src="${s.base}/mobile/images/onlineBm.png">
    </div>
    <div class="signUp-content">
        <div class="signUp-content-nei">
            <form>
                <div class="signUp-step"><img src="${s.base}/mobile/images/oneStep.png"></div>
                <div class="divinput-line">
                    <label>学段</label>
                    <input type="text" id="periodType" placeholder="请选择学段" autocomplete="off"/>
                </div>
                <div class="divinput-line">
                    <label>帐号</label>
                    <input type="text" id="loginName" placeholder="请输入手机号" autocomplete="off"/>
                </div>
                <div class="divinput-line">
                    <label>密码</label>
                    <input type="password" id="password" class="password" placeholder="请输入密码" autocomplete="off"/>
                </div>
                <div class="divinput-line">
                    <label>确认密码</label>
                    <input type="password" id="passwordAgain" class="password" placeholder="请再次输入密码" autocomplete="off"/>
                </div>
                <div class="signUp-step"><img src="${s.base}/mobile/images/twoStep.png"></div>
                <div class="divinput-line">
                    <label>学籍号</label>
                    <input type="text" id="studentCode" placeholder="请输入学籍号" autocomplete="off"/>
                </div>
                <div class="divinput-line">
                    <label>姓名</label>
                    <input type="text" id="studentName" placeholder="请输入姓名" autocomplete="off"/>
                </div>
                <div class="divinput-line">
                    <label>身份证号</label>
                    <input type="text" id="idNumber" placeholder="请输入身份证号" autocomplete="off"/>
                </div>
                <div class="divinput-line">
                    <label style="display: inline;">监护人身份证号</label>
                    <input style="width: calc(103% - 2.9rem);" type="text" id="guardianIdNumber" placeholder="请输入监护人身份证号" autocomplete="off"/>
                </div>
                <div class="divbutton-line">提交</div>
            </form>
        </div>
        <div class="signUp-content-bz">注意：信息一旦提交无法修改</div>
    </div>
</div>

</body>
<script type="text/javascript" src="${s.base}/mobile/js/common.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/jquery-weui.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/constant.js"></script>
<script>
 $(function(){
        $.fn.initSelect("#periodType", "学段", periodType);
        //两次密码校验
        $('.password').bind('blur', function () {
            var password = $('#password').val();
            var passwordAgain = $('#passwordAgain').val();
            if (isNotBlank(password) && isNotBlank(passwordAgain)) {
                if (password !== passwordAgain) {
                    $.toast("两次密码输入不一致！", "text");
                    return false;
                }
            }
        });

        //点击提交按钮
        $(".divbutton-line").bind("click", function () {
            if (isBlank($('#periodType').val())) {
                $.toast("请选择学段", "text");
                return false;
            }
            if (isBlank($('#loginName').val())) {
                $.toast("请输入手机号", "text");
                return false;
            } else {
                var phone = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!phone.test($('#loginName').val())) {
                    $.toast("帐号格式不正确", "text");
                    return false;
                }
            }
            if (isBlank($('#password').val())) {
                $.toast("请输入密码", "text");
                return false;
            }
            if (isBlank($('#passwordAgain').val())) {
                $.toast("请再次输入密码", "text");
                return false;
            }
            if (isBlank($('#studentCode').val())) {
                $.toast("请输入学籍号", "text");
                return false;
            }
            if (isBlank($('#studentName').val())) {
                $.toast("请输入姓名", "text");
                return false;
            }
            if (isBlank($('#idNumber').val())) {
                $.toast("请输入身份证号", "text");
                return false;
            } else {
                var idNumber = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                if (!idNumber.test($('#idNumber').val())) {
                    $.toast("身份证格式不正确", "text");
                    return false;
                }
            }
            if (isBlank($('#guardianIdNumber').val())) {
                $.toast("请输入监护人身份证号", "text");
                return false;
            } else {
                var guardianIdNumber = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                if (!guardianIdNumber.test($('#guardianIdNumber').val())) {
                    $.toast("监护人身份证号格式不正确", "text");
                    return false;
                }
            }
            $('.tc').eq(2).show();
        });

        //点击确定/取消按钮
        $(".tc-button").bind("click", function () {
            if ($(this).hasClass("only-btn-blue")) {
                $('.tc').eq(0).hide();
                window.location.href = "/phone/index?token=${token}&applyId=${applyId}";
            } else if ($(this).hasClass("only-btn-orange")) {
                $('.tc').eq(1).hide();
            } else if ($(this).hasClass("submit")) {
                $('.tc').eq(2).hide();
                var data = {
                    periodType: $('#periodType').attr("data-values"),
                    loginName: $('#loginName').val(),
                    password: $('#password').val(),
                    studentCode: $('#studentCode').val(),
                    studentName: $('#studentName').val(),
                    idNumber: $('#idNumber').val(),
                    guardianIdNumber: $('#guardianIdNumber').val(),
                    applyId: '${applyId}'
                };
                $.fn.doPost('/phone/student/addOrUpdate', data, function (result) {
                    if (result.code === 0) {
                        $('.tc').eq(0).show();
                    } else {
                        $('.tc').eq(1).find(".tc-middle-txt")[0].innerHTML = result.msg;
                        $('.tc').eq(1).show();
                    }
                });
            } else if ($(this).hasClass("cancel")) {
                $('.tc').eq(2).hide();
            }
        });
    })
</script>
</html>
